[#escape x as (x)!?html]
  <nav class="navbar navbar-expand navbar-light border-bottom common-navbar [#if shadowNav!false] shadow-sm[/#if] ">
    <div class="container flex-column flex-xl-row justify-content-start align-items-stretch align-items-xl-center px-lg-3">
      <div class="d-flex align-items-center">
        <div class="flex-grow-1">
          <a class="navbar-brand" href="${site.url}" title="${site.name}"><img src="${site.logo!'${resource}/static/img/logo.png'}" alt="${site.name}" height="50"></a>
        </div>
        <button class="btn d-xl-none collapsed p-0" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
                aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" focusable="false">
            <path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path>
          </svg>
        </button>
      </div>
      <div class="navbar-nav-scroll mr-auto">
        <ul class="navbar-nav flex-row">
          <li class="nav-item">
            <a class="nav-link[#if isIndex??] active[/#if]" href="${site.url}">首页</a>
          </li>
          [@ZChannelList filterList='true' ; list]
            [#list list as item]
              <li class="nav-item">
                <a class="nav-link[#if (channel?? && channel.nodeList[0].id == item.id)] active[/#if]" href="${item.url}"[#if item.targetBlank] target="_blank"[/#if]>${item.name}</a>
              </li>
            [/#list]
          [/@ZChannelList]
        </ul>
      </div>
      <div class="collapse d-xl-block" id="navbarNavDropdown">
        <div class="d-flex justify-content-end mt-2 mt-xl-0 py-2 py-xl-0">
         <div class="ml-3">
            <a class="btn btn-light text-primary" href="/search">
              <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-search" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"></path>
                <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"></path>
              </svg>
            </a>
          </div>
          <div class="dropdown ml-3 d-none" id="loginAfterDiv">
            <img id="avatarImg" class="rounded-circle dropdown-toggle" data-toggle="dropdown"
                 style="width:36px;height:36px;cursor:pointer;">
            <div class="dropdown-menu dropdown-menu-right">
              <a class="dropdown-item" href="${base}/user"><i class="far fa-user"></i> <span>个人中心</span></a>
              <button class="dropdown-item"   onclick="logOut()"><i class="fas fa-sign-out-alt"></i> <span>退出</span></button>
           </div>
          </div>
          <div class="ml-3" id="loginDiv">
            <a class="btn btn-light text-primary" href="${base}/login">登录</a>
            <a class="btn btn-primary" href="${base}/register">注册</a>
          </div>
        </div>
      </div>
      <div  class="d-none d-lg-block ml-2">
        <div id='assist-open' class="btn btn-light text-primary">无障碍</div>
      </div>
    </div>
  </nav>
[/#escape]
<script>
  $(function () {
    Cms.getLoginUser('${base}','${api}',false,headLoginCallBack)
    [#if content??]
      Cms.checkChannelPerm('${base}','${api}','${content.channelId}')
    [#elseif channel??]
      Cms.checkChannelPerm('${base}','${api}','${channel.id}')
    [/#if]
  });
  function headLoginCallBack(){
      //登录状态
      $("#avatarImg").attr("src",sessionStorage.getItem("avatar"))
      $("#loginAfterDiv").removeClass("d-none")
      $("#loginDiv").addClass("d-none")
  }
  function logOut(){
    const token = sessionStorage.getItem("accessToken");
    axios.get('${api}/user/logout?token='+token, {
        headers: {
          'Tenant-Id': Cms.getTenantId()
        }
        }).then(function (response) {
          if (response.data.code == 0) {
            sessionStorage.removeItem("accessToken");
            sessionStorage.removeItem("expiresTime");
            sessionStorage.removeItem("refreshToken");
            sessionStorage.removeItem("userId");
            sessionStorage.removeItem("avatar");
            sessionStorage.removeItem("deptName");
            sessionStorage.removeItem("nickname");
            sessionStorage.removeItem("username");
            $("#loginAfterDiv").removeClass("d-none")
            $("#loginDiv").addClass("d-none")
            window.location.href="${base}/"
          }else{
            alert("服务异常,请联系管理员")
          }
        });
  }

  // 判断时间戳是否过期的函数
  function isExpired(timestamp) {
    return Date.now() > timestamp;
  }
</script>
<script>
  (function() {
  if (!sessionStorage.length) {
    // Ask other tabs for session storage
    localStorage.setItem('getSessionStorage', Date.now());
  };
  window.addEventListener('storage', function(event) {
    if (event.key == 'getSessionStorage') {
      // Some tab asked for the sessionStorage -> send it
      localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
      localStorage.removeItem('sessionStorage');
    } else if (event.key == 'sessionStorage' && !sessionStorage.length) {
      // sessionStorage is empty -> fill it
      var data = JSON.parse(event.newValue);
      for (key in data) {
        sessionStorage.setItem(key, data[key]);
      }
    }
  });
  })();
  </script>
